<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="text-align: left">
      <el-form-item label="活动归属">
        <el-select v-model="form.groupId" placeholder="请选择活动区域">
          <el-option v-for="item in groupList" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="活动内容">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary" @click="onSubmit">创建并通知</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  /* eslint-disable indent,no-undef */

  import { addNotice, groupRead } from '../../../public/api'

  export default {
    data () {
      return {
        groupList: [],
        form: {
          groupId: '',
          title: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit () {
        addNotice({
            createdId: this.User_id,
            groupId: this.form.groupId,
            title: this.form.title,
            content: this.form.desc
          }
        ).then(data => {
          this.$message('成功了')
          this.form = {
            groupId: '',
            title: '',
            desc: ''
          }
          this.$emit('close')
          console.log(data)
        }).catch(
          msg => {
            this.$message('失败了')
            console.log(msg)
          }
        )
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    mounted () {
      groupRead({
        user_id: this.User_id
      }).then(
        data => {
          console.log(data.data[0].group_info.name)
          console.log(data.data[0].group_info.id)
          this.groupList = data.data.map(item => {
            return {
              label: item.group_info.name,
              value: item.group_info.group_id
            }
          })
        }
      ).catch()
    }
  }

</script>
<style>


</style>
